<template>
  <div class="container">
    <div class="left">
      <div class="subtitle">
        <img src="../assets/image/blue_point.png" alt />
        实时车辆
      </div>
      <div class="car-chart" id="car-chart"></div>
    </div>
    <div class="right">
      <div class="blue-square" v-for="(item,index) in items" :key="index"> <img v-bind:src="item.StorageUrl1" alt="" @click="$imgPreview" :data-img="item.StorageUrl1">  </div>
    </div>
  </div>
</template>

<script>
  import https from '@/assets/js/https.js'
export default {
  name: "cars",
  data(){
    return {
      items:[]
    }
  },
  mounted() {
    this.initChart();
    this.getCars();
    var that=this;
    this.$mytimer.addCallBack(this,function (host) {
      if (that==host){
        that.getCars();
      }
    })
  },
  props: ["userId"],
  methods: {
    getCars(){
      let params ={"userId":this.userId}
      let self = this;
      https.fetchGet('/web/VVID/MotorVehicles',params ).then((data) => {
        self.items = data.data.MotorVehicleListObject.MotorVehicleObject
      }).catch(err=>{
                console.log(err)
              }
      )
    },
    initChart() {
      let myChart = this.$echarts.init(document.getElementById("car-chart"));
      let option = {};
      let pieData = [
          {
            name: "园区车辆",
            value: 108,
            children: [
              {
                name: "进入",
                value: 95
              },
              {
                name: "离开",
                value: 27
              }
            ]
          },
          {
            name: "外访车辆",
            value: 71,
            children: [
              {
                name: "离开",
                value: 53
              },
              {
                name: "进入",
                value: 71
              }
            ]
          }
        ],
        colorList = ["#ffc300", "#43dba3", "#ff8b42", "#f65091", "#5fbfff","#7d6aff"];

      let sInner;
      let sOuter = [];
      sInner = pieData.map(d => {
        if (d.children) {
          d.children.forEach(r => {
            sOuter.push({
              name: r.name,
              value: r.value,
              type: d.name.replace(/中国|定电/g, "")
            });
          });
        }
        return {
          name: d.name.replace(/中国|定电/g, ""),
          value: d.value
        };
      });
      option = {
        // backgroundColor: "rgba(0,51,102, 1)",
        color: colorList,
        tooltip: {
          formatter(data) {
            let d = data.data;
            // if (d.type) {
            //   return d.type + "</br>" + d.name + "：" + d.value;
            // }
            return d.name + "：" + d.value;
          }
        },
        legend: {
          show: false
        },
        series: [
          {
            name: "车辆",
            type: "pie",
            selectedMode: "single",
            radius: [0, "60%"],
            label: {
              normal: {
                position: "inner",
                fontSize: 12,
                formatter(d) {
                  return d.name + d.percent + "%";
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: sInner
          },
          {
            name: "状态",
            type: "pie",
            radius: ["65%", "70%"],
            label: {
              normal: {
                color: "#fff",
                fontSize: 12,
                formatter(d) {
                  return d.name + d.value;
                }
              }
            },
            labelLine: {
              length: 0,
              length2: 8
            },
            data: sOuter
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 225px;
  background: rgba(153, 181, 247, 0.1);
  border: 1px solid rgba(56, 147, 255, 0.3);
  padding: 10px;
}
.car-chart {
  width: 220px;
  height: 180px;
}

.subtitle {
  height: 32px;
  width: 100%;
  color: white;
  font-size: 14px;
  text-align: left;
  img {
    box-shadow: 0 0 10px #3893ff;
    margin: 0 13px 0 10px;
    vertical-align: middle;
  }
}

.right {
  display: flex;
  flex-wrap: wrap;
}

.left {
  width: 220px;
  /*width:40%;*/
  flex: 0 0 auto;
}

.blue-square {
  width: 117px;
  height: 98px;
  background-image: url(../assets/image/blue-square.png);
  margin-right: 12px;
  margin-bottom: 8px;
  img {
    width:100%;
    height:100%;
  }
}
</style>

